import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 唯一的数据源，公共的数据就定义在这
  state: {
    name:"小胡",
    age:18,
    students:[
      {id:1,name:"妲己",score:67},
      {id:2,name:"妲己",score:78},
      {id:3,name:"妲己",score:95}
    ],
    user:{
      id:1,
      userinfo:{
        name:"王大赛",
        detail:{
          city:"北京"
        }
      }
    }

  },
  //充当视图层和状态层的中间层，具有缓存作用，用于获取state中的数据，处理好数据后返回(计算属性)
  getters: {
    //1.返回数据
    get_city(state){
      //state:仓库中的state对象
      return state.user.userinfo.detail.city
    },

    //2.处理好数据返回 类似计算属性
    get_ava(state){
      let a = 0;
      state.students.forEach(value=>{
         a += value.score
      })
      return (a/state.students.length).toFixed(2)
    }
  },

  //修改数据的唯一方式，同步，需要通过commit触发才能修改
  mutations: {
    mutation_age(state,payload){
      state.age += payload;
    }
  },

  
  //可以做同步和异步操作，必须要用dispatch派遣才能调用
  actions: {
    //去做异步操作，
    // action_age(context,payload) {
    //   //content: store对象上下文，里面包括commit,dispatch等方法，用于触发和派遣
    //   //payload:调用函数时传递的参数
    //   setTimeout(()=>{
    //     context.comment("mutation_age",2)
    //   },2000)
    // }


    action_age({commit},payload) {
      //content: store对象上下文，里面包括commit,dispatch等方法，用于触发和派遣
      //payload:调用函数时传递的参数
      setTimeout(()=>{
        comment("mutation_age",2)
      },2000)
    }
  },
  modules: {
  }
})
